<template>
    <div id="redDetail">
        <div class="banner">
            <span class="return">
                <i class="icon iconfont" @click="routerBack">&#xe72d;</i>红包详情
            </span>
            <div class="avatar">
                 <img :src="data.my.avatar" alt="">
            </div>
        </div>
        <div class="user_msg">
           <span>{{data.my.money | moneyFilter }}</span> 元
           <p>
               可在个人中心-我的红包处查看
           </p>
        </div>
        <div class="other_msg">
            <div class="title">
                查看大家的手气：
            </div>
            <div class="list-content">
                 <div class="list" v-for="item in data.other" :key="item.id">
                    <p class="account">
                        {{item.username}}
                    </p>
                    <div class="list-info">
                        <p class="time">{{item.create_time|filtertimes}}</p>
                        <p class="num">{{item.money|moneyFilter}} 元</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_bg"></div>
    </div>
</template>

<script>
    import {formatDate} from 'js/date'
    export default {
        data(){
            return{
                data:{}
            }
        },
        created(){
            this.data= JSON.parse(sessionStorage.getItem("redEnvelope"));
        },
        methods:{
            routerBack(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            }
        },
        filters:{
            moneyFilter(money){
                if(money==0){
                    return money
                }else{
                    return  parseFloat(money).toFixed(2);
                }
            },
            filtertimes(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
#redDetail{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    z-index:9999;
    width: 7.5rem;
    margin:0 auto;
    .banner{
        position:relative;
        width:100%;
        height:3.49rem;
        @include bg-image('../../assets/image/redDetail_top');
        background-size: 100% 100%;
        .avatar{
            position:absolute;
            bottom: -1.5rem;
            left: 50%;
            margin-left: -.92rem;
            width: 1.84rem;
            height: 2.64rem;
            @include bg-image('../../assets/image/redDetail_avatar');
            background-size:100% 100%;
            img{
                width: 1.65rem;
                height: 1.65rem;
                border-radius: 50%;
                margin: 0 auto;
                line-height: 1.8rem;
                margin-top: .09rem;
            }

        }
    }
    .return{
        position: absolute;
        top: 0;
        width: 7.5rem;
        z-index: 99;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size:$font-size-m;
        color:#fff;
        .icon{
            padding:0 .1rem;
            font-size:.4rem;
            vertical-align: top;
        }
    }
    .user_msg{
        margin-top:1.8rem;
        text-align: center;
        font-size:$font-size-m;
        color:#ff5858;
        span{
            font-size:.6rem;
        }
        p{
            margin-top:.3rem;
            color:#999;
        }
    }
    .other_msg{
        margin-top:.48rem;
        padding: .3rem .3rem .3rem .3rem;
        font-size:$font-size-m;
        background:#f3f2f2;
        .title{
            padding:0 .2rem .2rem .3rem;
            border-bottom:1px solid #e5e5e5;
        }
        .list{
            margin-bottom:.2rem;
        }
        .list-info{
            display:flex;
            justify-content: space-between;
        }
        .list-content{
            padding:.4rem .3rem;
            padding-bottom:2rem;
            margin-top:.22rem;
            background:#fff;
            height:4.6rem;
            border-radius:10px;
            color:#ffc21c;
            overflow-y:scroll;
        }
    }
    .bottom_bg{
        position:fixed;
        bottom:0;
        left:50%;
        transform: translateX(-50%);
        height:1.33rem;
        width: 7.5rem;
        @include bg-image('../../assets/image/redDetail_bottom');
        background-size:100% 100%;
    }
}
</style>